'use strict';
import React, {Component} from 'react';
import {
    Image, StyleSheet, Text, TouchableNativeFeedback, View, Switch,
    Picker, CheckBox
} from 'react-native';
import Color from '../../constant/Color';
import InputModal from "../modal/InputModal";
import SliderModal from "../modal/SliderModal";
import CustomSliderModal from "../modal/CustomSliderModal";

/** 弹出选择行 */
export class WheelLine extends Component {
    // 可选项
    mDatas: Array<WheelItem> = [];

    constructor(props) {
        super(props);
        this.state = {
            // 是否可点击
            editable: props.editable,
            // 选中的value
            value: props.value,
        };

        this.mDatas = [...props.datas]
    }

    /** 设置是否可编辑 */
    setEditable(editable: boolean): void {
        this.setState({
            editable: editable,
        })
    }

    /** 设置value */
    setValue(value: string): void {
        this.setState({
            value: value,
        })
    }

    /** 获取value */
    getValue(): string {
        return this.state.value;
    }

    _doEdit(value: string): void {
        this.setValue(value);
    }

    /** 这里当selectedValue的值在下列的value之中找不到时,则会默认显示第一项的label值 */
    render() {
        return (
            <TouchableNativeFeedback
                background={TouchableNativeFeedback.SelectableBackground()}
                disabled={!this.state.editable}>
                <View
                    style={styles.TitleValueLine}>
                    <Text
                        style={this.state.editable ? styles.TitleValueLineTitleEditable : styles.TitleValueLineTitleUneditable}>{this.props.title}</Text>

                    <View
                        style={styles.TitleValueInnerLine}>
                        <Picker
                            prompt={'请选择'}
                            style={{minWidth: 100,}}
                            selectedValue={this.state.value}
                            onValueChange={(value) => {
                                this._doEdit(value)
                            }}
                            enabled={this.state.editable}>
                            {this.mDatas.map((item, i) => this._renderLineItem(item.key, item.value, i))}
                        </Picker>
                    </View>
                </View>
            </TouchableNativeFeedback>
        );
    }

    /** 渲染每一行 */
    _renderLineItem(key: string, value: string, i: Number) {
        return <Picker.Item label={key} value={value} key={i}/>;
    }
}

export class WheelItem {
    key: string;
    value: string;
    static item:WheelItem;

    constructor(key: string, value: string) {
        this.key = key;
        this.value = value;
    }

    static getTestDatas() {
        WheelItem.item = new WheelItem("key1", "value1");

        let mDatas = new Set();
        mDatas.add(new WheelItem("key0", "value0"));
        mDatas.add(this.item);
        mDatas.add(new WheelItem("key2", "value2"));
        mDatas.add(new WheelItem("key3", "value3"));

        return mDatas;
    }

    static getOne():WheelItem{
        return WheelItem.item;
    }

    toString():string{
        return this.key + ", " + this.value;
    }
}

//样式定义
const styles = StyleSheet.create({
    TitleValueLine: {
        height: 60,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingLeft: 10,
        paddingRight: 10,
        backgroundColor: Color.white,
    },
    TitleValueLineTitleEditable: {
        flex: 1,
        color: Color.darkGray,
        fontSize: 14,
    },
    TitleValueLineTitleUneditable: {
        flex: 1,
        color: Color.gray,
        fontSize: 14,
    },

    TitleValueInnerLine: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end',
    },
});

